.position-fixed {
    position: fixed;
}

// flex布局 ********************************************
.flex {
    display: flex;
}
.flex-column {
    display: flex;
    flex-direction: column;
}
.flex-wrap {
    display: flex;
    flex-wrap: wrap; // 子元素换行
}
// .flex-1{flex:1}
@for $i from 1 through 6 {
    .flex-#{$i} {
        flex: #{$i};
    }
}
// 设置主轴方向 x y
$direction: (
    // 从左到右（默认值）
    "r": row,
    // 从右到左
    "rr": row-reverse,
    // 从上到下
    "c": column,
    // 从下到上
    "cr": column-reverse
);
// 主轴上子元素排列方式
$justify: (
    // 从头部开始，如果主轴是x轴，则从左到右（默认值）
    "start": flex-start,
    // 在主轴居中对齐(如果主轴是 x 轴则水平居中)
    "center": center,
    // 从尾部开始排列
    "end": flex-end,
    // 先两边贴边，再平分剩余空间☆☆☆
    "between": space-between,
    // 平分剩余空间
    "around": space-around
);
// 侧轴上子元素排列方式
$align: (
    // 从上到下
    "start": flex-start,
    // 挤在一起居中(垂直居中)
    "center": center,
    // 从下到上
    "end": flex-end,
    // 拉伸(默认值)
    "stretch": stretch
);

@each $alignKey, $alignVal in $align {
    @each $justifyKey, $justifyVal in $justify {
        @each $directionKey, $directionVal in $direction {
            // flex-start-center
            .flex-#{$justifyKey}-#{$alignKey} {
                display: flex;
                justify-content: #{$justifyVal};
                align-items: #{$alignVal};
            }
            // flex-r-start-center
            .flex-#{$directionKey}-#{$justifyKey}-#{$alignKey} {
                display: flex;
                flex-direction: #{$directionVal};
                justify-content: #{$justifyVal};
                align-items: #{$alignVal};
            }
        }
    }
}
